<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snippai - AI驱动的智能截图工具</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        /* 首字下沉效果 */
        .drop-cap::first-letter {
            float: left;
            font-size: 4rem;
            line-height: 3rem;
            padding-right: 0.5rem;
            margin-top: 0.5rem;
            font-weight: 700;
            color: #4f46e5;
        }
        
        /* 卡片悬停效果 */
        .feature-card {
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            background: rgba(255, 255, 255, 1);
        }
        
        /* 渐变文字效果 */
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* 动画效果 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-fadeInUp {
            animation: fadeInUp 0.8s ease-out;
        }
        
        /* 按钮效果 */
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
        }
        
        /* 标题装饰线 */
        .title-decoration {
            position: relative;
            display: inline-block;
        }
        
        .title-decoration::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 2px;
        }
        
        /* 代码块样式 */
        .code-block {
            background: #1e293b;
            color: #e2e8f0;
            padding: 1rem;
            border-radius: 0.5rem;
            font-family: 'Consolas', 'Monaco', monospace;
            position: relative;
            overflow-x: auto;
        }
        
        /* 图标动画 */
        .icon-bounce {
            animation: bounce 2s infinite;
        }
        
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        /* Mermaid 图表样式 */
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
    </style>
</head>
<body>
    <!-- Hero 区域 -->
    <section class="relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-600 via-indigo-600 to-blue-600 opacity-90"></div>
        <div class="relative container mx-auto px-6 py-24">
            <div class="text-center text-white animate-fadeInUp">
                <div class="mb-6">
                    <i class="fas fa-camera text-6xl icon-bounce"></i>
                </div>
                <h1 class="text-5xl md:text-7xl font-bold mb-6">
                    Snippai
                </h1>
                <p class="text-xl md:text-2xl mb-8 font-light">
                    AI驱动的智能截图工具，让信息提取变得前所未有的简单
                </p>
                <div class="flex justify-center space-x-4">
                    <a href="https://github.com/xyTom/snippai" target="_blank" class="btn-primary text-white px-8 py-4 rounded-full font-medium inline-flex items-center">
                        <i class="fab fa-github mr-2"></i>
                        访问 GitHub
                    </a>
                </div>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0V120Z" fill="white"/>
            </svg>
        </div>
    </section>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-6 py-16">
        <!-- 工具概览 -->
        <section class="mb-20 animate-fadeInUp">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-4xl font-bold mb-8 title-decoration">工具概览</h2>
                <p class="text-lg leading-relaxed text-gray-700 drop-cap">
                    Snippai 是一款由开源社区开发的 AI 驱动智能截图工具，能够从图片中识别并转化多种内容。它专为教师、研究人员、开发者、设计师及日常使用者设计，帮助他们快速从截图中提取公式、文本、表格、翻译内容等信息，极大提升工作效率。
                </p>
                <div class="mt-8 p-6 bg-gradient-to-r from-purple-50 to-indigo-50 rounded-xl">
                    <div class="flex items-center">
                        <i class="fas fa-link text-3xl text-indigo-600 mr-4"></i>
                        <div>
                            <p class="text-sm text-gray-600 mb-1">官方仓库</p>
                            <a href="https://github.com/xyTom/snippai" target="_blank" class="text-indigo-600 hover:text-indigo-800 font-medium">
                                https://github.com/xyTom/snippai
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 解决的问题 -->
        <section class="mb-20 animate-fadeInUp">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-4xl font-bold mb-8 title-decoration">它能解决什么问题</h2>
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="feature-card p-6 rounded-xl">
                        <i class="fas fa-square-root-alt text-3xl text-purple-600 mb-4"></i>
                        <h3 class="text-xl font-semibold mb-2">复杂公式转换</h3>
                        <p class="text-gray-600">截图里的复杂数学公式无法快速转化为可编辑的 LaTeX 格式</p>
                    </div>
                    <div class="feature-card p-6 rounded-xl">
                        <i class="fas fa-table text-3xl text-blue-600 mb-4"></i>
                        <h3 class="text-xl font-semibold mb-2">表格数据提取</h3>
                        <p class="text-gray-600">图片中的表格难以提取为结构化数据，影响后续处理</p>
                    </div>
                    <div class="feature-card p-6 rounded-xl">
                        <i class="fas fa-language text-3xl text-green-600 mb-4"></i>
                        <h3 class="text-xl font-semibold mb-2">文字识别翻译</h3>
                        <p class="text-gray-600">手动输入文字或翻译效率低下，容易出现错误</p>
                    </div>
                    <div class="feature-card p-6 rounded-xl">
                        <i class="fas fa-code text-3xl text-red-600 mb-4"></i>
                        <h3 class="text-xl font-semibold mb-2">代码内容读取</h3>
                        <p class="text-gray-600">不能直接读取代码、颜色、图像内容，影响开发效率</p>
                    </div>
                </div>
                <div class="mt-8 p-6 bg-gradient-to-r from-green-50 to-blue-50 rounded-xl">
                    <p class="text-lg text-gray-700 italic">
                        <i class="fas fa-quote-left text-2xl text-gray-400 mr-2"></i>
                        Snippai 利用 AI 自动识别截图内容，一键转化，极大提升效率、减少错误。
                    </p>
                </div>
            </div>
        </section>

        <!-- 核心功能 -->
        <section class="mb-20 animate-fadeInUp">
            <div class="max-w-6xl mx-auto">
                <h2 class="text-4xl font-bold mb-12 text-center">
                    <span class="gradient-text">核心功能</span>
                </h2>
                <div class="grid md:grid-cols-3 gap-8">
                    <div class="text-center">
                        <div class="w-20 h-20 mx-auto mb-4 bg-gradient-to-br from-purple-500 to-purple-700 rounded-full flex items-center justify-center text-white">
                            <i class="fas fa-square-root-alt text-3xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">公式识别</h3>
                        <p class="text-gray-600">从截图中提取数学公式并转为 LaTeX 格式，方便复制使用</p>
                    </div>
                    <div class="text-center">
                        <div class="w-20 h-20 mx-auto mb-4 bg-gradient-to-br from-blue-500 to-blue-700 rounded-full flex items-center justify-center text-white">
                            <i class="fas fa-file-alt text-3xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">文本提取（OCR）</h3>
                        <p class="text-gray-600">精准识别图片中的文字内容，快速转为可编辑文本</p>
                    </div>
                    <div class="text-center">
                        <div class="w-20 h-20 mx-auto mb-4 bg-gradient-to-br from-green-500 to-green-700 rounded-full flex items-center justify-center text-white">
                            <i class="fas fa-table text-3xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">表格转换</h3>
                        <p class="text-gray-600">将截图中的表格转成 Markdown 表格格式，利于数据处理</p>
                    </div>
                    <div class="text-center">
                        <div class="w-20 h-20 mx-auto mb-4 bg-gradient-to-br from-pink-500 to-pink-700 rounded-full flex items-center justify-center text-white">
                            <i class="fas fa-palette text-3xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">图像内容分析</h3>
                        <p class="text-gray-600">智能分析图片内容、识别主色调、提供设计参考</p>
                    </div>
                    <div class="text-center">
                        <div class="w-20 h-20 mx-auto mb-4 bg-gradient-to-br from-indigo-500 to-indigo-700 rounded-full flex items-center justify-center text-white">
                            <i class="fas fa-code text-3xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">代码理解</h3>
                        <p class="text-gray-600">识别图里的代码片段并解释其作用</p>
                    </div>
                    <div class="text-center">
                        <div class="w-20 h-20 mx-auto mb-4 bg-gradient-to-br from-yellow-500 to-orange-600 rounded-full flex items-center justify-center text-white">
                            <i class="fas fa-language text-3xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">实时翻译</h3>
                        <p class="text-gray-600">检测语言并提供实时翻译服务